<template>
	<view class="view-o">手机动态密码登录</view>
	<view class="view-t">使用已注册手机号</view>

	<view class="view-2">手机号</view>
	<view class="view-3 flex-c-s">
		<input type="number" placeholder="请输入手机号" v-model="state.mobile" />
		<view hover-class="h-c" class="code-tips flex-c-c" @tap="getCode">{{ state.tips }}</view>
	</view>
	<view class="view-2">短信验证码</view>
	<view class="view-3 flex-c-s">
		<input type="text" placeholder="请输入验证码" v-model="state.sms_code" />
	</view>
	<view class="submit-button flex-c-c" @tap="submit">登录</view>

	<view class="flex-c-s padding">
		<text class="text-1" @tap="emits('changeLoginType')">使用账号密码登录</text>
		<!-- <text class="text-2" @tap="emits('resetPassWord')">忘记密码?</text> -->
	</view>

	<u-toast ref="uToast1"></u-toast>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

const emits = defineEmits(['changeLoginType', 'submit', 'resetPassWord']);

const uToast1: any = ref();
const times = 60;
const state: any = reactive({
	tips: '获取验证码',
	seconds: times,
	sms_code: '',
	mobile: ''
});
const { toast, test } = uni.$u;

const submit = () => {
	if (state.sms_code && test.mobile(state.mobile)) {
		emits('submit', { type: '2', mobile: state.mobile, sms_code: state.sms_code });
	} else {
		toast('请输入验证码');
	}
};

const getCode = () => {
	if (state.tips === '获取验证码') {
		if (test.mobile(state.mobile)) {
			// 模拟向后端请求验证码
			uni.$u.http
				.post('/sms/v1.0/send', {
					type: '1',
					mobile: state.mobile
				})
				.then(() => {
					state.tips = state.seconds + 's';
					let clear = setInterval(() => {
						state.seconds -= 1;
						state.tips = state.seconds + 's';
						if (state.seconds == 0) {
							clearInterval(clear);
							state.tips = '获取验证码';
							state.seconds = times;
						}
					}, 1000);
				});
		} else {
			toast('请输入正确手机号');
		}
	} else {
		toast('倒计时结束后再发送');
	}
};
</script>

<style lang="scss" scoped>
.view-o {
	width: 365rpx;
	height: 43rpx;
	font-size: 45rpx;
	font-family: DFHei-Md-80-Win-GB;
	color: #232323;
	margin-bottom: 30rpx;
	margin-left: 44rpx;
}

.view-t {
	margin: 0 44rpx 40rpx;
	color: #333;
}

.view-2 {
	margin: 0 44rpx 20rpx;
	font-weight: bold;
	font-size: 26rpx;
	color: #141414;
}

.view-3 {
	width: 666rpx;
	margin: 0 auto 30rpx;
	padding-bottom: 15rpx;
	border-bottom: 4rpx solid #ec7413;
	margin-bottom: 30rpx;
}

.code-tips {
	width: 219rpx;
	height: 65rpx;
	background: #ec7413;
	border-radius: 8rpx;
	font-size: 24rpx;
	font-family: Microsoft YaHei;
	color: #ffffff;
}

.submit-button {
	margin: 36rpx auto 50rpx;
	width: 660rpx;
	height: 88rpx;
	background: #ec7413;
	border-radius: 8rpx;

	font-size: 24rpx;
	font-family: Microsoft YaHei;
	color: #ffffff;
}

.text-1 {
	font-size: 28rpx;
	font-family: Microsoft YaHei;
	color: #ec7413;
}

.text-2 {
	font-size: 28rpx;
	font-family: Microsoft YaHei;
	color: #333;
}

.padding {
	padding: 0 44rpx;
}
</style>
